<template>
  <div id="wordCloud"></div>
</template>

<script>
import 'echarts-wordcloud'
import resize from "@/utils/resize";
export default {
  mixins: [resize],
  data() {
    return {
      info: {},
      chartData: []
    }
  },
  methods: {
    init() {
      this.info = {
        name: this.$route.query.name,
        key: this.$route.query.key,
        companyName: this.$route.query.companyName
      }
      this.getData()
    },
    getData() {
      this.$get(this.$Url.team.ciyun, {
        pid: this.info.key
      }).then(res => {
        let data = (res.data && res.data.agg && res.data.agg.keywords) || []
        if (data.length <= 0) {
          this.$emit('wordCloudNoData', true)
          return
        }
        let chartData = []
        data.forEach(v => {
          chartData.push({
            name: v.key,
            value: v.doc_count
          })
        })
        this.chartData = chartData
        this.renderChart()
      }).catch(err => {})
    },
    renderChart() {
      let chart = this.$echarts.init(document.getElementById("wordCloud"))
      let valArr = this.chartData.map(v => v.value)
      let min = Math.min(...valArr)
      let max = Math.max(...valArr)
      let mathLog = Math.log(max) === 0 ? 
        1 : Math.log(min)/Math.log(max) === 0 ?
        1 : Math.log(min)/Math.log(max) // Math.log(1)为0，需要判断底数不为0，同时如果结果为0，则置为1，方便后续计算
      let option = {
        series: [
          {
            type: 'wordCloud',
            shape: 'circle',
            // maskImage: maskImage,
            left: 'center',
            top: 'center',
            width: '90%',
            height: '90%',
            right: null,
            bottom: null,
            sizeRange: [14, 14 * (mathLog) + 20], // fontSize大小
            // rotationRange: [-90, 90],
            // rotationStep: 45,
            rotationRange: [0, 0],
            rotationStep: 0,
            gridSize: 8,
            drawOutOfBound: false, // 是否允许绘制到图表外
            layoutAnimation: true,
            textStyle: {
              fontFamily: 'sans-serif',
              cursor: 'default',
              // fontWeight: 'bold',
              color: function() {
                let str = 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                ].join(',') + ')'
                return str
              }
            },
            emphasis: {
              focus: 'self',
              textStyle: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: this.chartData
          }
        ]
      }
      chart.setOption(option)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
#wordCloud {
  width: 100%;
  height: 300px;
}
</style>